<template>
  <div class="container">
    <!--    顶部导航啦-->
    <top-bar>
      <div class="top_bar">
        <div class="user-info">
          <div class="user-image"></div>
          <div class="user-info-ms">
            <div class="user-info-title"><span>早上好！Song</span></div>
            <div class="user-info-describe"><span>欢迎回来，你已经累计读书256小时！</span></div>
          </div>
        </div>
        <search-view :data="data"></search-view>
        <theme :data=themes></theme>
      </div>

    </top-bar>
    <!--    内容区域-->
    <div class="content-reading">

      <div class="left-content-reading">
        <div class="reading-top ">
          <div class="label">
            <div class="name"><span>Top飙升榜</span></div>
            <a class="more" href="#" style="margin-right: 50px">more</a>
          </div>
          <div class="reading-top-list grid-columns list-x">

            <div class="read-top-list-item" v-for="item in topData" :key="item.imgUrl">

              <book-top-card :item="item"></book-top-card>
            </div>

          </div>
        </div>
        <!--文章收藏-->
        <div class="read-category  grid-columns">

          <!--          -->
          <div class="reading-category-box"
               style="background-image: linear-gradient(-225deg, #7DE2FC 0%, #B9B6E5 100%);">
            <img class="category-box-image" src="@/assets/icons/category-box.png" alt=""/>
            <div style="margin-left: 15px">
              <span>文章收藏</span>
              <br>
              <span style="font-size: 12px">日本人把审美简洁到极致</span>
            </div>
          </div>

          <!--          -->
          <div class="reading-category-box"
               style="background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);">
            <img class="category-box-image" src="@/assets/icons/all_categroy.png" alt=""/>
            <div style="margin-left: 15px">
              <span>热门分类</span>
              <br>

            </div>
          </div>

        </div>

        <!--文章收藏-->

        <!--        历史观看-->
        <div class="reading-history">

          <div class="reading-history-list list-x">
            <book-card v-for="i in historyData" :key="i.imgUrl" :book="i"></book-card>
          </div>
        </div>

      </div>
      <div class="right-content-reading right-screen">
        <div class="label">
          <div class="name" style="font-size: 14px"><span>猜你喜欢</span></div>
          <a class="more" href="#" style="font-size: 10px">换一换</a>
        </div>
        <div class="book-title">
          引子穿越的唐家三少_斗罗大陆唐三小舞
        </div>

        <div class="book-content text-size list-y ">
          <p>
            巴蜀，历来有天府之国的美誉，其中，最有名的门派莫过于唐门。
          </p>
          <p>
            唐门所在是一个神秘的地方，许多人只知道，那是一个半山腰，而唐门所在这座山的山顶有一个令人胆颤心惊的名字，——鬼见愁。
          </p>
          <p>
            从鬼见愁悬崖上扔出一块石头，要足足数上十九下才会听到石落山底的回声，可见其高，也正是因为这十九秒，尚超过十八层地狱一筹，故而得名。
          </p>
          <p>
            一名身穿灰衣的青年正站在鬼见愁顶峰，凛冽的山风不能令他的身体有丝毫移动，从他胸口处那斗大的唐字就可以认出，他来自唐门，灰衣代表的，是唐门外门弟子。
          </p>
          <p>
            他今年二十九岁，因出生不久就进入唐门，在外门弟子的辈分中排名第三，因此外门弟子称他一声三少。当然，到了内门弟子口中，就变成了唐三。
          </p>
          <p>
            唐门从建立时开始就分为内外两门，外门都是外姓或被授予唐姓的弟子，而内门，则是唐门直系所属，家族传承。
          </p>
          <p>
            此时，唐三脸上的表情很丰富，时而笑，时而哭，但无论如何，都无法掩盖他的那发自内心的兴奋。
          </p>
          <p>
            二十九年了，自从二十九年前他被外门长老唐蓝太爷在襁褓时就捡回唐门时开始，唐门就是他的家，而唐门的暗器就是他的一切。
          </p>

        </div>
        <div class="book-footer">
          <img class="icon" src="@/assets/icons/left-arrowed.png" alt="right">
          <div class="book-name">斗罗大陆</div>
          <img class="icon" src="@/assets/icons/rigth-arrowed.png" alt="right">
        </div>
      </div>
      <!--      <div class="reading-top">-->
      <!--        <div class="label">-->
      <!--          <div class="name"><span>Top飙升榜</span></div>-->
      <!--          <a class="more" href="#" style="margin-right: 50px">more</a>-->
      <!--        </div>-->
      <!--        <div class="reading-top-list">-->
      <!--          <book-top-card v-for="item in topData" :item="item" :key="item.imgUrl"></book-top-card>-->

      <!--        </div>-->
      <!--      </div>-->
      <!--      <div class="read-category">-->
      <!--        <div class="reading-category-box"-->
      <!--             style="background-image: linear-gradient(-225deg, #7DE2FC 0%, #B9B6E5 100%);">-->
      <!--          <img class="category-box-image" src="@/assets/icons/category-box.png" alt=""/>-->
      <!--          <div style="margin-left: 15px">-->
      <!--            <span>文章收藏</span>-->
      <!--            <br>-->

      <!--            <span style="font-size: 12px">日本人把审美简洁到极致</span>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--        <div class="reading-category-box"-->
      <!--             style="background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);">-->
      <!--          <img class="category-box-image" src="@/assets/icons/all_categroy.png" alt=""/>-->
      <!--          <div style="margin-left: 15px">-->
      <!--            <span>热门分类</span>-->
      <!--            <br>-->

      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--      <div class="reading-history">-->
      <!--        <div class="label">-->
      <!--          <div class="name"><span>曾经读过</span></div>-->
      <!--          <a class="more" href="#">more</a>-->
      <!--        </div>-->
      <!--        <div class="reading-history-list list-x">-->
      <!--          <book-card v-for="i in historyData" :key="i.imgUrl" :book="i"></book-card>-->
      <!--        </div>-->

      <!--      </div>-->


    </div>
  </div>
</template>

<script lang="ts" setup>
import TopBar from "@/components/top-bar.vue"
import SearchView from "@/components/search.vue"
import Theme from "@/components/theme.vue"
import BookTopCard from "@/components/book-top-card.vue"
import {onMounted, onUpdated, reactive} from "vue";
import BookCard from "@/components/book-card.vue"
import {themes} from "@/config/data";
import {update} from "lodash";

const data = reactive<Array<string>>(['hello', 'world'])

onMounted(() => {
  const screenHeight: number = window.innerHeight;
  const screenWidth: number = window.innerWidth;
  console.log(screenHeight);
  console.log(screenWidth);
})

const topData = [{
  name: '平凡的世界',
  author: "艾林",
  number1: "75%",
  number2: "20%",
  number3: "5%",
  imgUrl: '../src/assets/images/t6_24965201.jpg',
  describe: "1975年初农民子弟孙少平到原西县高中读书，他贫困，自卑；后对处境相同的地主家庭出身的郝红梅产生情愫，在被同班同学侯玉英发现并当众说破后，"
},
  {
    name: '斗罗大陆',
    author: "唐家三少",
    number1: "80%",
    number2: "18%",
    number3: "2%",
    imgUrl: "https://wfqqreader-1252317822.image.myqcloud.com/cover/21/468021/t6_468021.jpg",
    describe: "唐门外门弟子唐三，因偷学内门绝学为唐门所不容，跳崖明志时却发现没有死，反而以另外一个身份来到了另一个世界，一个属于武魂的世界，名叫斗罗大陆。 　　"
  },
  {
    name: '昭阳殿',
    author: "棉花花",
    number1: "80%",
    number2: "18%",
    number3: "2%",
    imgUrl: "https://weread-1258476243.file.myqcloud.com/weread/cover/47/cpplatform_rfjtcfujqxrvsyvsqogz32/t6_cpplatform_rfjtcfujqxrvsyvsqogz321681268457.jpg",
    describe: "【大女主+宫斗+虐恋情深】千万点击古言佳作，大女主版《东宫》，金戈铁马的虐恋情深。他是草原受宠的公主，为爱甘愿本囚昭阳殿"
  }]

const historyData = [{
  imgUrl: 'https://weread-1258476243.file.myqcloud.com/weread/cover/2/cpPlatform_bac8GpVmxKS9KUNRigdfoC/t6_cpPlatform_bac8GpVmxKS9KUNRigdfoC.jpg',
  btnText: "READ",
  name: '人间欢喜'
},
  {
    imgUrl: 'https://weread-1258476243.file.myqcloud.com/weread/cover/0/cpPlatform_b8tP8rs9MxHAcpAQP32QdL/t6_cpPlatform_b8tP8rs9MxHAcpAQP32QdL.jpg',
    btnText: "READ",
    name: '有药'
  },
  {
    imgUrl: 'https://weread-1258476243.file.myqcloud.com/weread/cover/76/YueWen_41286964/t6_YueWen_41286964.jpg',
    btnText: "READ",
    name: '怦然心动'
  },
  {
    imgUrl: '../src/assets/images/t6_24965201.jpg',
    btnText: "READ",
    name: '平凡的世界'
  }]
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 10px;
  flex-direction: column;

  .content-reading {
    height: 100%;
    display: flex;
    gap: 10px;

    .left-content-reading {
      height: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;


      .reading-top {
        display: flex;
        flex-direction: column;
        height: 40%;
        justify-content: space-between;
        grid-column-gap: 20px;

        .reading-top-list {
          height: 100%;
          padding: 0 10px;
          flex: 1;

          .read-top-list-item {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

      }

      //收藏栏
      .read-category {
        height: 16%;
        padding: 0 10px;
        width: 100%;

        .reading-category-box {
          height: 80px;
          width: 100%;
          cursor: pointer;
          border-radius: 10px;
          justify-content: center;
          color: white;
          display: flex;
          align-items: center;
          box-shadow: rgba(0, 0, 0, 0.2) 0 20px 30px;

          .category-box-image {
            height: 60px;
            width: 60px;
            border-radius: 50%;
          }
        }
      }

      //  历史栏
      .reading-history {
        display: flex;
        height: 40%;
        padding: 0 10px;


        .reading-history-list {
          width: 100%;
          height: 100%;
          z-index: 3;
          display: flex;
          gap: 20px;
        }

      }


    }

    // 右边猜你喜欢区
    .right-content-reading {
      width: 28%;
      //height: 520px;
      border-radius: 20px;
      padding: 10px;
      color: white;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
      backdrop-filter: blur(5px);
      background: url("@/assets/icons/transparent-big.png");

      .book-title {
        font-size: 12px;
      }

      .book-content {
        flex: 1;
        font-size: 12px;
        display: flex;
        width: 100%;
        text-indent: 2em;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 25px;
      }

      .book-footer {
        width: 100%;
        display: flex;
        position: absolute;
        bottom: 10px;
        padding: 0 4px;
        justify-content: space-between;
        align-items: center;

        .book-name {
          text-align: center;
        }

        .icon {
          width: 10px;
          height: 20px;
        }
      }
    }


  }
}

.top_bar {
  display: flex;
  -webkit-app-region: drag; //设置可拖拽，但是要在子组件不需要拖到的地方取消，不然会失焦
  align-content: center;
  justify-content: space-between;

  .user-info {
    display: flex;
    align-items: start;
    justify-content: space-evenly;

    .user-info-ms {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: white;
      margin-left: 15px;
      align-items: start;

      .user-info-title {
        font-size: 20px;
      }

      .user-info-describe {
        font-size: 14px;
      }
    }
  }

  .user-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid white;
    background-image: url("@/assets/images/pic_5ijxAKSAYKErWtalMemh2.jpg");
    background-size: 40px 40px;
    background-position: center;
  }
}
</style>